<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE接口测试工具</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 25px;
            text-align: center;
        }

        .header h1 {
            font-size: 28px;
            margin-bottom: 5px;
        }

        .header p {
            opacity: 0.9;
            font-size: 16px;
        }

        .content {
            padding: 30px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
            font-size: 16px;
        }

        select, input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        select:focus, input:focus {
            outline: none;
            border-color: #4facfe;
            box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
        }

        .url-display {
            background: #f8f9fa;
            border: 2px dashed #dee2e6;
            border-radius: 8px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            word-break: break-all;
            min-height: 60px;
            display: flex;
            align-items: center;
        }

        .url-display span {
            color: #495057;
        }

        .btn-container {
            text-align: center;
            margin: 30px 0;
        }

        .request-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 18px;
            font-weight: 600;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .request-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .request-btn:disabled {
            background: #adb5bd;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .result-container {
            margin-top: 30px;
        }

        .result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .result-header h2 {
            color: #333;
            font-size: 20px;
        }

        .clear-btn {
            background: #ffc107;
            color: #212529;
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.3s;
        }

        .clear-btn:hover {
            background: #e0a800;
        }

        .result-content {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            min-height: 200px;
            max-height: 400px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            word-break: break-word;
            line-height: 1.5;
        }

        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .status-connected {
            background-color: #28a745;
        }

        .status-disconnected {
            background-color: #dc3545;
        }

        .connection-status {
            display: flex;
            align-items: center;
            margin-top: 10px;
            font-size: 14px;
        }

        .info {
            background-color: #e8f4fd;
            border-left: 4px solid #3498db;
            padding: 12px 15px;
            margin-top: 20px;
            border-radius: 4px;
            font-size: 14px;
        }

        .info h4 {
            margin-bottom: 5px;
            color: #2c3e50;
        }

        .info p {
            color: #34495e;
            line-height: 1.5;
        }

        @media (max-width: 600px) {
            .container {
                margin: 10px;
                border-radius: 10px;
            }

            .content {
                padding: 20px;
            }

            .header {
                padding: 20px 15px;
            }

            .header h1 {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>SSE接口测试工具</h1>
        <p>Server-Sent Events 实时数据流测试</p>
    </div>

    <div class="content">
        <div class="form-group">
            <label for="apiSelect">选择API接口：</label>
            <select id="apiSelect">
                <!-- API选项将通过JavaScript动态添加 -->
            </select>
        </div>

        <div class="form-group">
            <label for="queryInput">查询参数 (query)：</label>
            <input type="text" id="queryInput" placeholder="请输入查询参数...">
        </div>

        <div class="form-group">
            <label>完整请求URL：</label>
            <div class="url-display">
                <span id="fullUrl">请选择接口并输入参数</span>
            </div>
        </div>

        <div class="btn-container">
            <button id="requestBtn" class="request-btn">开始请求</button>
        </div>

        <div class="connection-status">
            <span class="status-indicator status-disconnected" id="statusIndicator"></span>
            <span id="statusText">未连接</span>
        </div>

        <div class="result-container">
            <div class="result-header">
                <h2>响应数据流：</h2>
                <button id="copyBtn" class="clear-btn" disabled>复制结果</button>
                <button id="clearBtn" class="clear-btn">清空结果</button>
            </div>
            <div class="result-content" id="resultContent">
                <!-- 数据流内容将显示在这里 -->
            </div>
        </div>

        <div class="info">
            <h4>使用说明</h4>
            <p>1. 选择一个接口地址</p>
            <p>2. 输入查询参数（可选）</p>
            <p>3. 点击"发送请求"按钮开始接收数据流</p>
            <p>4. 数据流结束后按钮会自动恢复可用状态</p>
        </div>
    </div>
</div>

<script>
    // 可配置的API端点数组
    const apiEndpoints = [
        'http://localhost:9001/quick-start/sse/text1',
        'http://localhost:9001/quick-start/sse/text2',
    ];

    // DOM元素
    const apiSelect = document.getElementById('apiSelect');
    const queryInput = document.getElementById('queryInput');
    const fullUrlDisplay = document.getElementById('fullUrl');
    const requestBtn = document.getElementById('requestBtn');
    const resultContent = document.getElementById('resultContent');
    const copyBtn = document.getElementById('copyBtn');
    const clearBtn = document.getElementById('clearBtn');
    const statusIndicator = document.getElementById('statusIndicator');
    const statusText = document.getElementById('statusText');

    let eventSource = null;

    // 初始化API下拉框
    function initApiSelect() {
        apiEndpoints.forEach(endpoint => {
            const option = document.createElement('option');
            option.value = endpoint;
            option.textContent = endpoint;
            apiSelect.appendChild(option);
        });
        updateFullUrl();
    }

    // 更新完整URL显示
    function updateFullUrl() {
        const baseUrl = apiSelect.value;
        const query = queryInput.value.trim();

        let fullUrl = baseUrl;
        if (query) {
            const separator = baseUrl.includes('?') ? '&' : '?';
            fullUrl += `${separator}query=${encodeURIComponent(query)}`;
        }

        fullUrlDisplay.textContent = fullUrl;
    }

    // 建立SSE连接
    function connectToSSE() {
        const url = fullUrlDisplay.textContent;

        if (!url || url === '请选择接口并输入参数') {
            alert('请先选择API接口并输入查询参数');
            return;
        }

        // 清空之前的结果
        resultContent.textContent = '';

        // 禁用按钮
        requestBtn.disabled = true;
        requestBtn.textContent = '请求中...';

        // 更新连接状态
        statusIndicator.className = 'status-indicator status-connected';
        statusText.textContent = '已连接';

        // 创建EventSource连接
        eventSource = new EventSource(url);

        // 处理接收到的消息
        eventSource.onmessage = function(event) {
            resultContent.textContent += event.data;
            // 滚动到底部
            resultContent.scrollTop = resultContent.scrollHeight;
        };

        // 处理连接错误
        eventSource.onerror = function(err) {
            console.error('SSE连接错误:', err);
            disconnectSSE();
        };

        // 处理连接关闭
        eventSource.addEventListener('end', function() {
            disconnectSSE();
        });
    }

    // 断开SSE连接
    function disconnectSSE() {
        if (eventSource) {
            eventSource.close();
            eventSource = null;
        }

        // 启用按钮
        requestBtn.disabled = false;
        requestBtn.textContent = '开始请求';

        // 更新连接状态
        statusIndicator.className = 'status-indicator status-disconnected';
        statusText.textContent = '未连接';

        // 启用复制按钮（如果有内容）
        if (resultContent.textContent.trim()) {
            copyBtn.disabled = false;
        }
    }

    // 在适当位置添加以下函数
    function copyResult() {
        const text = resultContent.textContent;
        if (text) {
            navigator.clipboard.writeText(text).then(() => {
                // 复制成功提示（可选）
                const originalText = copyBtn.textContent;
                copyBtn.textContent = '已复制';
                setTimeout(() => {
                    copyBtn.textContent = originalText;
                }, 2000);
            }).catch(err => {
                console.error('复制失败:', err);
            });
        }
    }

    // 清空结果
    function clearResult() {
        resultContent.textContent = '';
        copyBtn.disabled = true; // 清空时禁用复制按钮
    }

    // 事件监听器
    apiSelect.addEventListener('change', updateFullUrl);
    queryInput.addEventListener('input', updateFullUrl);
    requestBtn.addEventListener('click', connectToSSE);
    clearBtn.addEventListener('click', clearResult);
    copyBtn.addEventListener('click', copyResult);

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
        initApiSelect();
    });

    // 页面卸载时断开连接
    window.addEventListener('beforeunload', function() {
        if (eventSource) {
            eventSource.close();
        }
    });
</script>
</body>
</html>
